/**
 * 用户菜单 主体资格管理
 */
<template>
  <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>新建活动页面</el-breadcrumb-item>
      </el-breadcrumb>
      <!--列表-->
      <div class="container">
        <el-form  label-width="100px" :model="bannerDetail" class="form">
            <el-form-item label="名称">
              <el-input v-model=" bannerDetail.name"></el-input>
            </el-form-item>
            <el-form-item label="活动人数">
              <el-input v-model=" bannerDetail.capacity"></el-input>
            </el-form-item>
            <el-form-item label="活动地点">
              <el-input v-model="bannerDetail.locate_name"></el-input>
            </el-form-item>
            <el-form-item label="详细地点">
                <el-input v-model="bannerDetail.locate"></el-input>
            </el-form-item>
            <el-radio-group v-model="bannerDetail.charge" @change="justShow">
              <el-form-item label="活动收费" >
                <el-radio v-model="bannerDetail.charge" label="免费">免费</el-radio>
                <el-radio v-model="bannerDetail.charge" label="收费">收费</el-radio>
                <el-radio v-model="bannerDetail.charge" label="仅展示" >仅展示</el-radio>
              </el-form-item>
            </el-radio-group>
            <el-form-item label="活动须知">
              <el-input v-model="bannerDetail.notes_for_application"></el-input>
          </el-form-item>
          <el-form-item label="活动须知">
            <el-input v-model="bannerDetail.off_return" type="textarea"></el-input>
          </el-form-item>
         
            <el-form-item label="活动价格" >
                <el-input v-model="bannerDetail.charge_detail" :disabled="chargeDetail"></el-input>
            </el-form-item>
            <el-form-item label="用户token" >
              <el-input v-model="token"></el-input>
          </el-form-item>
            <el-form-item label="活动图片地址">
              <el-input v-model="bannerDetail.image"></el-input>
            </el-form-item>
            <el-form-item label="报名时间"> 
              <el-col :span="11" >
                <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.apply_begin_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
              </el-col>
              <el-col class="line" :span="1">-</el-col>
              <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.apply_end_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="活动时间">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.begin_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.end_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-col>
              </el-form-item>
        </el-form>
      <!-- 腾讯地图，用于获取经纬度和活动地点 -->
      <iframe id="mapPage" width="50%" height="600" frameborder=0 margin="10"
      src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
      </iframe>
  </div>
    <upload @changeImg="changeImg"></upload>
    <tags @changeDynamicTags="changeDynamicTags"></tags>
    <markdown @change="change" class="markdown"></markdown>
    <el-button size="mini" type="primary" @click="newActivity" class="button">新建活动</el-button>
    <el-button size="mini" type="primary" @click="userNewActivity" class="button">帮用户新建活动</el-button>

  </div>

</template>

<script>
import tags from "../../components/tags"
import markdown from '../../components/markdown'
import upload from '../../components/upload'
import {originateAct,uploadPic,editActTag,loadAllTags,newTagI,userOriginateAct} from '../../api/basisMG'
export default {
  data() {
    return {
      fileList: [],
      imgDatas: [],
      activityI:{

        activity:{
        }
      },
      token:"",
      dynamicTags: [15],
      chargeDetail:false,
      bannerDetail:{
          name:"",
          capacity:10,
          locate:"",
          locate_name:"",
          apply_begin_time:"",
          apply_end_time:"",
          begin_time:"",
          end_time:"",
          introduction:"",
          originator:"",
          charge:"",
          charge_detail:"",
          need_apply:true,
          auto_return:null,
          finished:1,
          introduction:"",
          tags:[],
          image:"",
          off_return:"感谢您的报名申请，活动参与信息见活动详情页，活动前请通过微信或者电话与我先行联系"
      },
    }
  },
  // 注册组件
  components: {
    markdown,
    upload,
    tags
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    var that = this
    this.token = localStorage.logintoken;
    window.addEventListener('message', function(event) {
            var loc = event.data;
            that.bannerDetail.locate_name = loc.poiaddress
            that.bannerDetail.locate_lat = loc.latlng.lat
            that.bannerDetail.locate_lng = loc.latlng.lng                       
    }, false); 
    loadAllTags("parameter").then(res=>{
        console.log(res);
        this.tags = res.data
        this.getTag();
      })
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //用于tags传值给DynamicTags来提交新活动
    changeDynamicTags(val){
      this.dynamicTags = val
    },
    justShow(val){
      if(this.bannerDetail.charge === "仅展示"){
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth()+1;
        if(month <= 9){
          month = "0" + month
        }
        var date = now.getDate();
        if(date <= 9){
          date = "0" + date
        }
        var beginStr = year +"-"+ month +"-"+ date
        var endStr = (year + 1)+"-"+ month +"-"+ date
        this.bannerDetail.apply_begin_time = beginStr
        this.bannerDetail.apply_end_time = endStr
        this.bannerDetail.begin_time = beginStr
        this.bannerDetail.end_time = endStr
        this.chargeDetail = true
      }else if(this.bannerDetail.charge === "免费"){
        this.chargeDetail = true
      }else if(this.bannerDetail.charge === "收费"){
        this.chargeDetail = false
      }

    },
    //得到地图组件的经纬度和位置属性
    getPlace(val){
      console.log(val)
      this.bannerDetail.locate_name = val.addr
      this.bannerDetail.locate_lat = val.lat
      this.bannerDetail.locate_lng = val.lng
    },
    changeImg(val){
      this.bannerDetail.image = val
      console.log(val)
    },
    newActivity(){
        this.bannerDetail.tags = this.dynamicTags
        this.activityI.activity = this.bannerDetail
        this.activityI.token = this.token
        console.log(this.token)
        originateAct(this.activityI,this.token)
        .then(res=>{
            console.log(res)
            alert(res.data)
            if(res.data === "success")
              this.$router.push({path:"/Activity/activityList"})
        })
    },
    userNewActivity(){
        this.bannerDetail.tags = this.dynamicTags
        this.activityI.activity = this.bannerDetail
        this.activityI.token = this.token
        console.log(this.token)
        userOriginateAct(this.activityI,this.token)
        .then(res=>{
            console.log(res)
            alert(res.data)
            if(res.data === "success")
              this.$router.push({path:"/Activity/activityList"})
        })
    },
    change(val) {
      this.bannerDetail.introduction = val
    },
  }
}
</script>

<style scoped>
.container{
  display: flex;
  flex-direction: row;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.form{
  width: 40%;
}
.markdown{
  height: 50%;
}
.pic_list_box {
  display: flex;
 }
.upload_btn {
  width: 100px;
  height: 100px;
  padding-left: 15px;
  background-color: red;
}
.pic_list {
  display: flex;
}
</style>